<!doctype html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <th:block th:include="include :: header('课程表详情')" />
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/weixin/css/ksd.css"/>
</head>
<body>
<div id="app">
    <div id="courseListBox" class="course_bdleft course-block  Mtp25">
        <br class="text-center mt-5">
            <h1 class="fz32 fw">学相伴微信支付V3-Native系列</h1>
            <input type="text" ref="course" th:value="${course.courseid}" id="courseid">
            <!--<img src="/weixinpay?courseid=1317503462556848129"+${course.courseid} width="250" alt="">-->
            <img src="/weixinpay?courseid=1317503462556848129" width="250" alt="">

            <span>你购买的课程是:</span><span th:text="${course.title}" v-model="course.title"/></br>
            <span>价格是:</span><span th:text="${course.price}" v-model="course.price"/>
            <p>已经等待了:{{count}}次</p>
        </div>
    </div>
</div>
<script src="/weixin/js/vue.min.js"></script>
<script src="/weixin/js/axios.min.js"></script>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            courseid: "",
            count:5,
            course:'',
            title:'',
            price:''
        },
        created: function () {
            this.course = [[${course}]];
            this.title = this.course.title;
            this.price = this.course.price;

            this.courseid = document.getElementById("courseid").value;
            // 1： 轮询监听用户是否支付成功!
            this.intervalcallback();
        },

        methods: {
            // 1 : 用户支付成功回调监听
            listenerCallback: function () {
                var that = this;
                if(that.count<=0){
                    alert("支付超时");
                    window.location.href = window.location.href;
                    return;
                }
                that.count--;
                axios.get("/api/paySuccess?courseid=" + this.courseid).then(function (res) {
                    if(res.data.code == 20000){
                        if (that.timer) clearInterval(that.timer);
                        alert("支付成功!!");
                    }
                });
            },

            intervalcallback: function () {
                var that = this;
                if (that.timer) clearInterval(that.timer);
                that.timer = setInterval(this.listenerCallback, 3000);
            }
        }
    })

</script>
</body>
</html>